<template>
  <div class="listnav">
    <div class="header2">
      <router-link tag="div" to="/profile">&lt;</router-link>
      <div>
        <strong>我的优惠</strong>
      </div>
      <div>兑换红包</div>
    </div>
    <nav>
      <ul>
        <router-link tag="li" to="/redb/coupon" active-class="active">
          <span>红包</span>
        </router-link>
        <router-link tag="li" to="/redb/hongbao" active-class="active">
          <span>店铺红包</span>
        </router-link>
        <router-link tag="li" to="/redb/voucher" active-class="active">
          <span>抵用卷</span>
        </router-link>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.listnav {
  z-index: 1;
  .header2 {
    background-image: linear-gradient(90deg, #0af, #0085ff);
    display: flex;
    height: 3rem;
    line-height: 3rem;
    color: #fff;
    div {
      flex: 1;
      text-align: center;
    }
    div:nth-of-type(1) {
      font-size: 1.2rem;
      left: 1.2rem;
    }
    div:nth-of-type(2) {
      left: 9.9rem;
      font-size: 0.95rem;
    }
    div:nth-of-type(3) {
      font-size: 0.8rem;
      right: 1rem;
    }
  }
  nav {
    width: 100%;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    ul {
      display: flex;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      li {
        flex: 1;
        display: flex;
        justify-content: center;
        font-size: 0.75rem;
        &.active {
          color: #ccc;
          span {
            width: 40%;
            border-bottom: 0.1rem solid #ccc;
            display: block;
          }
        }
      }
    }
  }
}
</style>
